<template>
    <div class="home">
        <div class="head">
            <div class="logo">旅梦的后台管理系统</div>
            <div class="user">
                <span>Welcome, {{ route.query.name }}</span>
            </div>
        </div>
        <div class="main">
            <div class="menu">
                <ul>
                    <li>
                        <router-link to="/home/user">用户管理</router-link>
                    </li>
                    <li>
                        <router-link to="/article">文章管理</router-link>
                    </li>
                    <li>
                        <router-link to="/catgory">评论管理</router-link>
                    </li>
                </ul>
            </div>
            <div class="content">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();


</script>

<style lang="css" scoped>
.head {
    height: 60px;
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    align-items: center;
    background-color: #4e12d871;
    color: #fff;
}

.main {
    display: flex;
    height: calc(100vh - 60px)
}

.menu {
    flex: 0 0 200px;
    /* 不放大 不缩小 */
    background-color: #6453e8;
}

.menu ul {
    list-style: none;
    text-align: center;
}

.menu ul li a {
    display: block;
    padding: 15px 0;
    color: #fff;
    cursor: pointer;
}

.content {
    flex: 1
}
</style>